<template>
  <div>
    <div>
      <svg-icon :icon="'setting'" @click="onOpenClick"></svg-icon>
    </div>
    <el-drawer
      v-model="globalSetting"
      title="系统全局配置"
      direction="rtl"
      :before-close="handleClose"
      @closed="handleClosed"
      class="gloabl-setting-drawer"
    >
      <div class="drawer-item">
        <span>侧边栏 logo</span>
        <el-switch v-model="isShowLogo" @change="changeShowLogo" />
      </div>
      <div class="drawer-item">
        <span>开启 tagsView</span>
        <el-switch v-model="isShowTagsView" @change="changeShowTagsView" />
      </div>
      <div class="drawer-item">
        <span>固定header</span>
        <el-switch v-model="fixedHeader" @change="changeFixedHeader" />
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

const isShowLogo = computed(() => {
  return store.getters.showLogo
})

const isShowTagsView = computed(() => {
  return store.getters.showTagsView
})

const fixedHeader = computed(() => {
  return store.getters.isFixedHeader
})

const globalSetting = computed(() => {
  return store.getters.showGlobalSetting
})

const onOpenClick = () => {
  store.commit('app/changeShowGlobalSetting', true)
}
const handleClosed = () => {
  store.commit('app/changeShowGlobalSetting', false)
}
const changeShowLogo = (val) => {
  store.commit('app/changeShowLogo', val)
}
const changeShowTagsView = (val) => {
  store.commit('app/changeShowTagsView', val)
}
const changeFixedHeader = (val) => {
  store.commit('app/changeFixedHeader', val)
}
</script>

<style lang="scss" scoped>
.gloabl-setting-drawer {
  width: 200px;
}
.drawer-item {
    margin-bottom: 10px;
}
.drawer-item span {
  font-size: 14px;
  color: #999;
  margin-right: 20px;
}
</style>
